<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <h:form id="frm_global" prependId="false">
        
        <p:outputPanel autoUpdate="true">
            <h:inputHidden id="ihQtdAmb" value="#{controllerPrincipal.qtdAmbulancias}"/>
            <h:inputHidden id="ihQtdOcor" value="#{controllerPrincipal.qtdOcorrencias}"/>
            <h:inputHidden id="ihQtdOcorrAnt"/>
        </p:outputPanel>
        
        <h:inputHidden id="ihIndexAmb" value="#{controllerPrincipal.indiceAmbulanciaSelecionada}"/>
        <h:inputHidden id="ihIndexOcor" value="#{controllerPrincipal.indiceOcorrenciaSelecionada}"/>
        
        <p:poll autoStart="true" 
                interval="30" 
                listener="#{controllerPrincipal.atualizarConteudo}" 
                update="frm_global:tav_view_menu, maps" 
                oncomplete="reabrirTabs();redimensionarFullScreen();" 
                onstart="armazenarQtdOcorrencias('#{controllerPrincipal.qtdOcorrencias}'); redimensionarFullScreen();" 
                onerror="redimensionarFullScreen();"/>

        <p:layout id="layout" 
                  styleClass="layout" 
                  onToggle="redimensionarFullScreen();" 
                  onClose="redimensionarFullScreen();" 
                  onResize="redimensionarFullScreen();">

            <p:layoutUnit id="layoutEsquerdo" 
                          position="west" 
                          size="350" 
                          resizable="false" 
                          closable="false" 
                          collapsible="true" 
                          effect="drop"
                          effectSpeed="5"
                          collapsed="true"
                          collapseSize="23"
                          header="Entidades No Mapa">

                <p:tabView id="tav_view_menu" activeIndex="0" style="background-color: none !important" onTabChange="redimensionarFullScreen();">

                    <p:tab id="tab_ambulancias" title="#{msg.principal_ambulancias}">

                        <p:scrollPanel id="spMenu" mode="native" styleClass="scroll_menu">

                            <ui:repeat id="repeat_dados_lidos" value="#{controllerPrincipal.ultimosDadosLidos}" var="ultDadoLido" varStatus="status">

                                <p:panel id="pnDadosLidos" collapsed="true" styleClass="painel_retratil">

                                    <f:facet name="header">

                                        <h:panelGroup>

                                            <p:commandLink action="#{controllerPrincipal.centralizarAmbulanciaSelecionada(ultDadoLido, status.index)}" 
                                                           onclick="configurarIndexTabAmbSelecionada('#{status.index}'); abrirPainelAmbulancias('#{status.index}'); redimensionarFullScreen();" 
                                                           ajax="true" 
                                                           oncomplete="redimensionarFullScreen();" 
                                                           update=":frm_global:spMaps" 
                                                           styleClass="link_cent_amb">

                                                <div style="width: 100%; height: 3px">

                                                    <img id="#{ultDadoLido.idMonitorado}_imgAmbMenu" src="#{controllerPrincipal.obterImagemAmbulancia(ultDadoLido)}" title="#{controllerPrincipal.obterTitleImagemAmbulancia(ultDadoLido)}"/>

                                                    <p:spacer width="3"/>

                                                    <span id="#{ultDadoLido.idMonitorado}_descHeader">
                                                        #{ultDadoLido.descricaoMonitorado}
                                                    </span>

                                                </div>
                                                
                                            </p:commandLink>

                                            <h:panelGroup style="float: right !important;">
                                                <p:commandLink action="#{controllerVisualizarPercurso.exibirPainelVisualizarPercurso(ultDadoLido)}" update=":frm_percurso">
                                                    <h:graphicImage value="/resources/imagens/history.png" title="Visualizar Histórico"/>
                                                </p:commandLink>
                                                <p:spacer width="15"/>
                                                <img id="#{ultDadoLido.idMonitorado}_imgGpsOnOff" src="#{controllerPrincipal.obterImagemGpsOnOff(ultDadoLido)}" title="#{controllerPrincipal.obterTitleGpsOnOff(ultDadoLido)}"/>
                                                <p:spacer width="1"/>
                                                <img id="#{ultDadoLido.idMonitorado}_imgIgnOnOff" src="#{controllerPrincipal.obterImagemIgnicaoOnOff(ultDadoLido)}" title="#{controllerPrincipal.obterTitleIgnicaoOnOff(ultDadoLido)}"/>
                                                <p:spacer width="1"/>
                                                <img id="#{ultDadoLido.idMonitorado}_imgIgnTipTransm" src="#{controllerPrincipal.obterImagemTipoTransmissao(ultDadoLido)}" title="#{controllerPrincipal.obterTitleTipoTransmissao(ultDadoLido)}"/>
                                            </h:panelGroup>

                                        </h:panelGroup>

                                    </f:facet>

                                    <h:panelGrid columns="2" cellspacing="2" cellpadding="2">

                                        <h:outputText value="#{msg.principal_monitorado}: " styleClass="texto-negrito"/>
                                        <span id="#{ultDadoLido.idMonitorado}_descMon">
                                            #{ultDadoLido.descricaoMonitorado}
                                        </span>

                                        <h:outputText value="#{msg.principal_equipamento}: " styleClass="texto-negrito"/>
                                        <span id="#{ultDadoLido.idMonitorado}_equipamento">
                                            #{ultDadoLido.serialEquipamento}
                                        </span>

                                        <h:outputText value="#{msg.principal_data_hora}: " styleClass="texto-negrito"/>
                                        <span id="#{ultDadoLido.idMonitorado}_dataHora">
                                            #{ultDadoLido.horaUltimaPosicao}
                                        </span>

                                        <h:outputText value="Tempo Transmissão: " styleClass="texto-negrito"/>
                                        <span id="#{ultDadoLido.idMonitorado}_tempoTransm">
                                            #{ultDadoLido.tempoTransmissao} s
                                        </span>

                                        <h:outputText value="#{msg.principal_velocidade}: " styleClass="texto-negrito"/>
                                        <span id="#{ultDadoLido.idMonitorado}_velocidade">
                                            #{ultDadoLido.velocidade}
                                        </span>

                                        <h:outputText value="#{msg.principal_latitude}: " styleClass="texto-negrito"/>
                                        <span id="#{ultDadoLido.idMonitorado}_latitude">
                                            #{ultDadoLido.latitudeStr}
                                        </span>

                                        <h:outputText value="#{msg.principal_longitude}: " styleClass="texto-negrito"/>
                                        <span id="#{ultDadoLido.idMonitorado}_longitude">
                                            #{ultDadoLido.longitudeStr}
                                        </span>

                                        <h:outputText value="#{msg.principal_status}: " styleClass="texto-negrito"/>
                                        <span id="#{ultDadoLido.idMonitorado}_status">
                                            #{controllerPrincipal.obterTitleImagemAmbulancia(ultDadoLido)}
                                        </span>

                                    </h:panelGrid>  

                                </p:panel>                                    

                            </ui:repeat> 

                        </p:scrollPanel>

                    </p:tab>

                    <p:tab id="tabOcorrencias" title="#{msg.principal_ocorrencias}">
                        <p:scrollPanel id="spOcorrencias" mode="native" styleClass="scroll_menu">
                            <ui:repeat id="repeat_ocorrencias" value="#{controllerPrincipal.ocorrencias}" var="ocorrencia" varStatus="status">

                                <p:panel id="pn_ocorrencias" collapsed="true" styleClass="painel_retratil" >

                                    <f:facet name="header">
                                        <h:graphicImage value="#{controllerPrincipal.obterImagemAlerta(ocorrencia)}"/>
                                        <p:spacer width="5"/>
                                        <p:commandLink value="N.º: #{ocorrencia.numeroOcorrencia} - #{ocorrencia.descricaoMonitorado}" action="#{controllerPrincipal.centralizarOcorrenciaSelecionada(ocorrencia, status.index)}" onclick="configurarIndexTabOcorSelecionada('#{status.index}'); abrirPainelOcorrencias('#{status.index}');redimensionarFullScreen();" update="#{(ocorrencia.latitude ne null and ocorrencia.longitude ne null) ? ':frm_global:spMaps' : ''}" oncomplete="redimensionarFullScreen();" styleClass="link_cent_amb"/>
                                        <p:commandLink action="#{controllerPrincipal.montarRota(ocorrencia)}" style="float: right !important; margin-right: 5px;" title="Visualizar Rota" rendered="#{controllerPrincipal.ocorrenciasAdicionadasMapa.contains(ocorrencia)}">
                                            <h:graphicImage value="/resources/imagens/rota.png"/>
                                        </p:commandLink>
                                        <p:commandLink id="btRemoverOcorrencia" action="#{controllerPrincipal.removerOcorrenciaSelecionada(ocorrencia, status.index)}" update=":frm_global:spMaps, :frm_global:tav_view_menu:spOcorrencias" style="float: right !important; margin-right: 5px;" rendered="#{controllerPrincipal.ocorrenciasAdicionadasMapa.contains(ocorrencia)}" oncomplete="abrirPainelOcorrencias(#{controllerPrincipal.indiceSelecionado});redimensionarFullScreen();">
                                            <h:graphicImage value="/resources/imagens/globe_delete.png" title="Remover Ocorrência do Mapa"/>
                                        </p:commandLink>                                                    
                                        <p:commandLink id="btVisualizarOcorrencia" action="#{controllerPrincipal.visualizarOcorrenciaNoMapa(ocorrencia, status.index)}" update=":frm_pesquisa_enderecos" style="float: right !important; margin-right: 5px;" rendered="#{!controllerPrincipal.ocorrenciasAdicionadasMapa.contains(ocorrencia)}">
                                            <h:graphicImage value="/resources/imagens/globe.png" title="Visualizar Ocorrência No Mapa"/>
                                        </p:commandLink>
                                    </f:facet>                                                

                                    <h:panelGrid columns="2" cellspacing="2" cellpadding="2">

                                        <h:outputText value="N.º Ocorrencia: " styleClass="texto-negrito"/>
                                        <span id="#{ocorrencia.idOcorrencia}_numero">
                                            #{ocorrencia.numeroOcorrencia}
                                        </span>

                                        <h:outputText value="Data/Hora: " styleClass="texto-negrito"/>
                                        <span id="#{ocorrencia.idOcorrencia}_dataHora">
                                            #{ocorrencia.dataCriacaoStr}
                                        </span>

                                        <h:outputText value="Tipo Atendimento: " styleClass="texto-negrito"/>
                                        <span id="#{ocorrencia.idOcorrencia}_tipoAtend">
                                            #{ocorrencia.descricaoTipoAtendimento.toUpperCase()}
                                        </span>

                                        <h:outputText value="Motivo: " styleClass="texto-negrito"/>
                                        <span id="#{ocorrencia.idOcorrencia}_motivo">
                                            #{ocorrencia.motivo}
                                        </span>

                                        <h:outputText value="Paciente: " styleClass="texto-negrito"/>
                                        <span id="#{ocorrencia.idOcorrencia}_paciente">
                                            #{ocorrencia.paciente.toUpperCase()}
                                        </span>

                                        <h:outputText value="Sexo: " styleClass="texto-negrito"/>
                                        <span id="#{ocorrencia.idOcorrencia}_sexo">
                                            #{ocorrencia.sexo.toUpperCase()}
                                        </span>

                                        <h:outputText value="Logradouro: " styleClass="texto-negrito"/>
                                        <span id="#{ocorrencia.idOcorrencia}_logradouro">
                                            #{ocorrencia.logradouro.toUpperCase()}
                                        </span>

                                        <h:outputText value="Número: " styleClass="texto-negrito"/>
                                        <span id="#{ocorrencia.idOcorrencia}_numeroLog">
                                            #{ocorrencia.numeroLogradouro}
                                        </span>

                                        <h:outputText value="Bairro: " styleClass="texto-negrito"/>
                                        <span id="#{ocorrencia.idOcorrencia}_bairro">
                                            #{ocorrencia.bairro.toUpperCase()}
                                        </span>

                                        <h:outputText value="Tel. Solicitante: " styleClass="texto-negrito"/>
                                        <span id="#{ocorrencia.idOcorrencia}_tel">
                                            #{ocorrencia.telefoneSolicitante}
                                        </span>

                                        <h:outputText value="Logr. Ref: " styleClass="texto-negrito"/>
                                        <span id="#{ocorrencia.idOcorrencia}_logRef">
                                            #{ocorrencia.logradouroReferencia.toUpperCase()}
                                        </span>

                                        <h:outputText value="Cidade: " styleClass="texto-negrito"/>
                                        <span id="#{ocorrencia.idOcorrencia}_cidade">
                                            #{ocorrencia.cidade.toUpperCase()}
                                        </span>

                                    </h:panelGrid>

                                </p:panel>
                            </ui:repeat>
                        </p:scrollPanel>
                    </p:tab>

                    <p:tab id="tabPontosInteresse" title="#{msg.principal_pontos_interesse}">

                        <p:scrollPanel id="spPontosInteresse" mode="native" styleClass="scroll_menu">
                            <ui:repeat id="repeat_pontos_interesse" value="#{controllerPrincipal.pontosInteresse}" var="pontoInteresse" varStatus="status">
                                <h:panelGrid columns="2">
                                    <h:graphicImage value="/resources/imagens/marcador_16x16.png"/>
                                    <p:commandLink value="#{pontoInteresse.descricao.toUpperCase()}" action="#{controllerPrincipal.centralizarPontoInteresseSelecionado(pontoInteresse)}" ajax="true" onclick="redimensionarFullScreen();" oncomplete="redimensionarFullScreen();" update=":frm_global:spMaps"/>
                                </h:panelGrid>
                            </ui:repeat>
                        </p:scrollPanel>

                    </p:tab>

                </p:tabView>

            </p:layoutUnit> 

            <p:layoutUnit id="layoutCentro" 
                          position="center" 
                          resizable="false"
                          styleClass="layout-centro">

                <p:scrollPanel id="spMaps" mode="native" styleClass="scrollpanel-maps">

                    <p:gmap id="maps" 
                            center="#{controllerPrincipal.maiorLatLong}" 
                            zoom="#{controllerPrincipal.zoom}" 
                            type="ROADMAP"
                            styleClass="maps"
                            model="#{controllerPrincipal.mapModel}"
                            widgetVar="gmaps">

                        <p:ajax event="stateChange" listener="#{controllerPrincipal.onStateChange}"/>  
                        <p:ajax id="evento_selecao" event="overlaySelect" listener="#{controllerPrincipal.selecionarMarcador}"/>

                        <p:gmapInfoWindow id="infoWindow" maxWidth="90"> 

                            <p:outputPanel autoUpdate="true">

                                <h:panelGrid columns="1" rendered="#{controllerPrincipal.informacaoSelecionada.tipoInformacao eq 'PONTO_INTERESSE'}">
                                    <h:outputText value="#{controllerPrincipal.informacaoSelecionada.mapaInformacao['descricao']}" style="font-weight: bold"/>
                                </h:panelGrid>

                                <h:panelGrid columns="1" rendered="#{controllerPrincipal.informacaoSelecionada.tipoInformacao eq 'ULTIMO_DADO_LIDO'}">
                                    <h:outputText value="#{controllerPrincipal.informacaoSelecionada.mapaInformacao['descricaoMonitorado']}" style="font-weight: bold"/>
                                    <h:outputText value="#{controllerPrincipal.informacaoSelecionada.mapaInformacao['horaUltimaPosicao']}">
                                        <f:convertDateTime pattern="#{msg.formatoPadraoDataHoraSeg}" locale="#{msg.localeBrasil}" timeZone="#{msg.timezoneBrasil}"/>
                                    </h:outputText>
                                    <h:outputText value="#{controllerPrincipal.informacaoSelecionada.mapaInformacao['velocidade']} Km/H"/>
                                    <h:outputText value="#{msg.principal_lat} #{controllerPrincipal.informacaoSelecionada.mapaInformacao['latitude']}"/>
                                    <h:outputText value="#{msg.principal_long} #{controllerPrincipal.informacaoSelecionada.mapaInformacao['longitude']}"/>
                                </h:panelGrid>

                                <h:panelGrid columns="2" cellspacing="2" cellpadding="2" rendered="#{controllerPrincipal.informacaoSelecionada.tipoInformacao eq 'OCORRENCIA'}">

                                    <h:outputText value="N.º Ocorrência: " styleClass="texto-negrito"/>
                                    <span>
                                        #{controllerPrincipal.informacaoSelecionada.mapaInformacao['numeroOcorrencia']}
                                    </span>

                                    <h:outputText value="Data/Hora: " styleClass="texto-negrito"/>
                                    <span>
                                        #{controllerPrincipal.informacaoSelecionada.mapaInformacao['dataCriacao']}
                                    </span>

                                    <h:outputText value="Tipo Atendimento: " styleClass="texto-negrito"/>
                                    <span>
                                        #{controllerPrincipal.informacaoSelecionada.mapaInformacao['descricaoTipoAtendimento']}
                                    </span>

                                    <h:outputText value="Motivo: " styleClass="texto-negrito"/>
                                    <span>
                                        #{controllerPrincipal.informacaoSelecionada.mapaInformacao['motivo']}
                                    </span>

                                    <h:outputText value="Paciente: " styleClass="texto-negrito"/>
                                    <span>
                                        #{controllerPrincipal.informacaoSelecionada.mapaInformacao['paciente']}
                                    </span>

                                    <h:outputText value="Sexo: " styleClass="texto-negrito"/>
                                    <span>
                                        #{controllerPrincipal.informacaoSelecionada.mapaInformacao['sexo']}
                                    </span>

                                    <h:outputText value="Logradouro: " styleClass="texto-negrito"/>
                                    <span>
                                        #{controllerPrincipal.informacaoSelecionada.mapaInformacao['logradouro']}
                                    </span>

                                    <h:outputText value="Número: " styleClass="texto-negrito"/>
                                    <span>
                                        #{controllerPrincipal.informacaoSelecionada.mapaInformacao['numeroLogradouro']}
                                    </span>

                                    <h:outputText value="Bairro: " styleClass="texto-negrito"/>
                                    <span>
                                        #{controllerPrincipal.informacaoSelecionada.mapaInformacao['bairro']}
                                    </span>

                                    <h:outputText value="Tel. Solicitante: " styleClass="texto-negrito"/>
                                    <span>
                                        #{controllerPrincipal.informacaoSelecionada.mapaInformacao['telefoneSolicitante']}
                                    </span>

                                    <h:outputText value="Logr. Ref: " styleClass="texto-negrito"/>
                                    <span>
                                        #{controllerPrincipal.informacaoSelecionada.mapaInformacao['logradouroReferencia']}
                                    </span>

                                    <h:outputText value="Cidade: " styleClass="texto-negrito"/>
                                    <span>
                                        #{controllerPrincipal.informacaoSelecionada.mapaInformacao['cidade']}
                                    </span>

                                    <h:outputText value="Lat: " styleClass="texto-negrito"/>
                                    <span>
                                        #{controllerPrincipal.informacaoSelecionada.mapaInformacao['latitude']}
                                    </span>

                                    <h:outputText value="Long: " styleClass="texto-negrito"/>
                                    <span>
                                        #{controllerPrincipal.informacaoSelecionada.mapaInformacao['longitude']}
                                    </span>

                                </h:panelGrid>

                            </p:outputPanel>

                        </p:gmapInfoWindow>                                      

                    </p:gmap>

                </p:scrollPanel>                        

            </p:layoutUnit> 

        </p:layout>
        
        <p:commandButton id="btRecarregar" 
                         action="#{controllerPrincipal.initialize()}"
                         update="@form"/>
        
        <script>
            //<![CDATA[
               $("#selectList").append(new Option("option text", "value"));
            //]]>
        </script>
        
    </h:form>

    <ui:include src="/restrito/dialog_buscar_enderecos.xhtml">
        <ui:param name="executeOnComplete" value="redimensionarFullScreen();"/>
    </ui:include>
    
    <ui:include src="/restrito/dialog_visualizar_mapa.xhtml"/>
    <ui:include src="/restrito/dialog_visualizar_rota.xhtml"/>
    <ui:include src="/restrito/dialog_visualizar_percurso.xhtml"/>
    <ui:include src="/restrito/dialog_status.xhtml"/>    

</html>

